'use client'
import NavBar from '@/app/components/NavBar';
import Headers from '@/app/components/Header';
import About from '@/app/components/About';
import Services from '@/app/components/Services';
import Wrok from './components/Wrok';
import Contact from './components/Contact';
import Footer from './components/Footer';
import { useEffect, useState } from 'react';
export default function Home () {
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      setIsDarkMode(true);
    } else {
      setIsDarkMode(false);
    }
  }, []);
  useEffect(() => {
    if (isDarkMode) {
      console.log(document.documentElement.classList)
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark'
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.theme = ''
    }
  }, [isDarkMode]);
  return (
    <>
      <NavBar isDarkMode={isDarkMode} setIsDarkMode={setIsDarkMode}></NavBar>
      <Headers isDarkMode={isDarkMode}></Headers>
      <About isDarkMode={isDarkMode}></About>
      <Services isDarkMode={isDarkMode}></Services>
      <Wrok isDarkMode={isDarkMode}></Wrok>
      <Contact isDarkMode={isDarkMode}></Contact>
      <Footer isDarkMode={isDarkMode}></Footer>
    </>
  );
}
